<template>
  <div class="flex">
    <!-- 列表 -->
    <el-card class="w-5/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
      <ContentWrap>
        <el-table
          v-loading="loading"
          :data="list"
          table-layout="auto"
          ref="tableRef"
          row-key="id"
          style="width: 100%"
        >
          <el-table-column
            label="标题"
            align="center"
            prop="title"
            width="600px"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <div style="text-align: left">
                [{{ row.channelName }}]{{ row.title }}
                <template v-if="row.topLevel > 0">
                  <el-icon><Top /></el-icon>{{ row.topLevel }}
                </template>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="栏目" align="center" prop="channelName" />
          <el-table-column
            label="发布时间"
            align="center"
            prop="releaseTime"
            width="180"
            :formatter="dateFormatter"
          />
          <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.CMS_CONTENT_STATUS" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template #default="{ row }">
              <!-- 操作：审核 -->
              <XTextButton
                preIcon="ep:edit"
                v-if="row.processInstanceId && row.status == 2"
                :title="t('action.review')"
                v-hasPermi="['cms:content:reject', 'cms:content:approve']"
                @click="handleReview(row.id)"
              />
              <XTextButton
                preIcon="ep:edit-pen"
                :title="t('cms.content.op.auditprocess')"
                v-if="row.processInstanceId"
                @click="handleAudit(row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </ContentWrap>
    </el-card>
  </div>
  <!--添加 修改 弹窗 -->
  <content-form
    v-model="formVisible"
    :action="action"
    :bean-id="beanId"
    :channel="channel"
    :review = review
    @finished="finishAndReload"
  />
</template>
<script setup lang="ts" name="Content">
// 全局相关的 import
import { ref } from 'vue'
import { Top } from '@element-plus/icons-vue'
import { dateFormatter } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import { useI18n } from '@/hooks/web/useI18n'
import * as ContentApi from '@/api/cms/content'
import ContentForm from './ContentForm.vue'
const { t } = useI18n() // 国际化

const channel = ref<any>()

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const tableRef = ref() // 表格的 Ref
// 列表相关的变量
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20
})
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ContentApi.getTodoContentPageApi(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const formVisible = ref<boolean>(false)
const beanId = ref<number>()
const action = ref<'add' | 'edit' | 'copy' | 'review'>('edit')
const review = ref<Boolean>()

const { push } = useRouter() // 路由
const handleReview = (id: number) => {
  action.value = 'review'
  beanId.value = id
  formVisible.value = true
  review.value = true
}

// 处理审批按钮
const handleAudit = (row) => {
  push({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: row.processInstanceId,
      beanId: row.id
    }
  })
}

//保存后回调
const finishAndReload = () => {
  formVisible.value = false
  getList()
}

// ========== 初始化 ==========
onMounted(async () => {
  await getList()
})
</script>
